<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css的继承、层叠和优先级</title>
    <a href="../选择器和盒子模型首页.html">首页</a>
</head>
<body>
        <h1>有继承性的属性：</h1>
            <h3>1.字体系列属性</h3>
            <p>font：组合字体</p>
            <p>font-family：规定元素的字体系列</p>
            <p>font-weight：设置字体的粗细</p>
            <p>font-size：设置字体的尺寸</p>
            <p>font-style：定义字体的风格</p>
            <p>font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。</p>
            <p>font-stretch：允许你使文字变宽或变窄。所有主流浏览器都不支持。</p>
            <p>font-size-adjust：为某个元素规定一个 aspect 值，字体的小写字母 “x” 的高度与 “font-size” 高度之间的比率被称为一个字体的 aspect 值。这样就可以保持首选字体的 x-height。</p>
        <br>
            <h3>2.文本系列属性:</h3>
            <p>text-indent：文本缩进</p>
            <p>text-align：文本水平对齐</p>
            <p>line-height：行高</p>
            <p>word-spacing：增加或减少单词间的空白（即字间隔）</p>
            <p>letter-spacing：增加或减少字符间的空白（字符间距）</p>
            <p>text-transform：控制文本大小写</p>
            <p>direction：规定文本的书写方向</p>
            <p>color：文本颜色</p>
            
            <h3>3.元素可见性：</h3>
            <p>visibility</p>
            
            <h3>4.表格布局属性:</h3>
            <p>caption-side、border-collapse、border-spacing、empty-cells、table-layout</p>
            </p>
            
            <h3>5.列表属性：</h3>
            <p>list-style-type、list-style-image、list-style-position、list-style</p>
            
            <h3>6.生成内容属性：</h3>
            <p>quotes</p>
            
            <h3>7.光标属性：</h3>
            <p>cursor</p>
            
            <h3>8.页面样式属性：</h3>
            <p>page、page-break-inside、windows、orphans</p>
            
            <h3>9.声音样式属性：</h3>
            <p>speak、speak-punctuation、speak-numeral、speak-header、
            speech-rate、volume、voice-family、pitch、pitch-range、
            stress、richness、、azimuth、elevation</p>
    <h1>2）计算这个选择器的优先级：</h1>
    <h3> html body div#first-div[title] .how-much:hover</h3>

    <p>标签选择器：html,body和div的优先级都是1</p>

    <p>ID选择器：div#first-div的优先级是100</p>

    <p>属性选择器[title]的优先级是10</p>

    <p>类选择器：.how-much的优先级是10</p>

    <p>伪类选择器:hover的优先级是10</p>
    <p>所以优先级 = 100 + 10 + 1 = 111</p>
    <h1>css计量单位</h1>
    <h2>1）分类列出绝对和相对计量单位，标出常用的单位。</h2>

    <h3>绝h4对计量单位： </h3>
    <h4> 常用的： </h4>
    <p>1.长度：米 (m)、千米 (km)、厘米 (cm)、毫米 (mm)、微米 (μm)、纳米 (nm) 等 </p>
    <p>2.质量：千克 (kg)、克 (g)、毫克 (mg)、微克 (μg) 等 </p>
    <p>3.时间：秒 (s)、分钟 (min)、小时 (h)、天 (d)、年 (y) 等 </p>
    <p>4..温度：开尔文 (K)、摄氏度 (°C)、华氏度 (°F) 等 </p>
    <h3>相对计量单位： </h3>
    <h4>常用的： </h4>
    <p>1.长度：百分比 (%)、比率 (ratio)、倍数等 </p>
    <p>2.质量：百分比 (%)、比率 (ratio)、倍数等 </p>
    <p>3.时间：百分比 (%)、比率 (ratio)、倍数等 </p>
    <p>4.角度：度 (°)、弧度 (rad)、梯度 (grad) 等 </p>

    <h2>举例说明rem和em的区别。</h2>
    <h3>相对性质不同：</h3>
    <p>rem是相对于根元素的字体大小；em是相对于父元素的字体大小</p>
    <h3>继承性不同：</h3>
    <p>rem为元素设定字体大小的时候，是相对于根元素进行计算的，当根元素字体大小改变时，其下面元素的字体大小也会改变；em会继承父元素的字体大小，当父元素字体大小改变时，其下面元素的字体大小也会改变</p>
    <h3>使用便捷性不同：</h3>
    <p>使用rem单位可以简化样式表的编写，因为只需要设置根元素的字体大小，其他元素的大小都可以使用rem单位进行计算；使用em单位时，需要逐级设置每个父元素的字体大小，相对复杂</p>

<style>
    * {
           margin: 0;
           padding: 0;
           text-decoration: none;
           list-style: none;
       }
       body{
        text-align: left;
       }
   .p {
       margin-bottom: 1%;
   }
</style>
</body>

</html>